<template>
  <uni-load-more
    v-if="status"
    :status="status"
    @reset="getData"
  ></uni-load-more>
  <view v-else class="content">
    <scroll-view
      enable-back-to-top
      scroll-y="true"
      :style="{
        height: `calc(100vh - ${
          data.status == 0 || (data.status == 1 && num == list.length) ? 160 : 0
        }rpx)`,
      }"
    >
      <view class="details">
        <view
          style="
            margin-bottom: 10rpx;
            color: #434343;
            font-weight: bold;
            font-size: 32rpx;
          "
        >
          {{ data.jh_mc }}
        </view>
        工单编号：<text>{{ data.gdh }}</text
        ><br />
        派发时间：<text>{{
          data.scsj ? data.scsj.substring(0, 16) : "--"
        }}</text
        ><br />
        开始时间：<text>{{
          data.kssj ? data.kssj.substring(0, 16) : "--"
        }}</text
        ><br />
        结束时间：<text>{{
          data.jssj ? data.jssj.substring(0, 16) : "--"
        }}</text>
        <view style="display: flex; justify-content: space-between">
          <text
            v-if="data.status == 2"
            style="font-size: 28rpx; color: #01b7fc"
            @click="goMap(true)"
            >巡检轨迹</text
          >
          <text
            v-else
            style="font-size: 28rpx; color: #01b7fc"
            @click="goMap(false)"
            >任务分布情况</text
          >
          <text style="font-size: 28rpx; color: #01b7fc" @click="goUrgentList"
            >应急事件({{ yjNum }})</text
          >
        </view>
        <view v-if="gzNum">
          <text style="font-size: 28rpx; color: #01b7fc" @click="goFaultLIst"
            >故障单({{ gzNum }})</text
          >
        </view>
      </view>
      <view class="line" />
      <view style="color: #1f2142; margin: 22rpx 0 22rpx 32rpx"
        >整体进度（{{ num }}/{{ list.length }}）</view
      >
      <view class="jieguo">
        <view
          v-for="(item, index) in list"
          :style="{
            color: 'white',
            background:
              item.status == '0'
                ? '#969CA9'
                : item.zcyc == 'y'
                ? '#62CBAA'
                : '#FC7272',
          }"
        >
          {{ index + 1 }}</view
        >
      </view>
      <view
        v-if="num != list.length && data.status != 0"
        style="font-size: 28rpx; color: #01b7fc; margin: 40rpx 0 0 40rpx"
        @click="getUser"
        >全部未执行任务设为正常</view
      >
      <view
        class="item"
        v-for="(item, index) in list"
        @click="goComplete(list[index])"
      >
        <view v-if="item.status == '0'">
          <view style="display: flex">
            <view class="index">{{ item.jhrw_xh }}</view>
            <text>{{ item.jhrw_zz }}</text>
          </view>
          <!-- <view class="button" v-if="item.status=='0'">
						执行检查
					</view> -->
          <view class="miaoshu">
            设备名称：<text>{{
              item.jhrw_sbmc ? item.jhrw_sbmc + `(${item.jhrw_sn})` : "--"
            }}</text>
          </view>
          <view class="miaoshu">
            任务地址：<text>{{ item.jhrw_rwdz || "--" }}</text>
          </view>
        </view>
        <view v-else>
          <view style="display: flex">
            <view class="index">{{ item.jhrw_xh }}</view>
            <text>{{ item.jhrw_zz }}</text>
          </view>
          <view class="center">
            <text>{{ item.clsj ? item.clsj.substring(0, 16) : "--" }}</text>
            <view
              :style="{
                lineHeight: '50rpx',
                borderColor: item.zcyc == 'n' ? '#FFC6C6' : '',
                color: item.zcyc == 'n' ? '#FC7272' : '#62CBAA',
              }"
            >
              {{ item.zcyc == "n" ? "异常" : "正常" }}</view
            >
          </view>
          <view class="miaoshu">
            设备名称：<text>{{
              item.jhrw_sbmc ? item.jhrw_sbmc + `(${item.jhrw_sn})` : "--"
            }}</text>
          </view>
          <view class="miaoshu">
            任务地址：<text>{{ item.jhrw_rwdz || "--" }}</text>
          </view>
          <view class="miaoshu">
            检查描述：<text>{{ item.qkms || "--" }}</text>
          </view>
          <scroll-view enable-back-to-top class="tab" scroll-x="true">
            <image
              v-for="(it, inx) in item.files"
              style="
                display: inline-block;
                border-radius: 12rpx;
                width: 144rpx;
                height: 100rpx;
                margin-right: 16rpx;
              "
              :src="it"
            />
          </scroll-view>
        </view>
      </view>
      <view style="height: 100rpx" />
    </scroll-view>
    <view
      v-if="data.status == 0 || (data.status == 1 && num == list.length)"
      class="foot"
      @click="submit"
    >
      {{ data.status == 0 ? "开始任务" : "提交任务" }}
    </view>
    <!-- <view v-else class="foot" style="background:#F8F8F8;color:#333333" >
			任务{{data.zxzt==2?'已完成':'未开始'}}
		</view> -->
    <multiple-select
      v-if="multipleFlag"
      v-model="show"
      :data="userlist"
      :default-selected="defaultSelected"
      @confirm="setAll"
    ></multiple-select>
  </view>
</template>

<script>
import API from "@/common/api.js";
import util from "@/common/util.js";
import uniLoadMore from "@/components/uLi-load-more/uLi-load-more.vue";
import multipleSelect from "@/components/momo-multipleSelect/momo-multipleSelect.vue";

export default {
  components: {
    uniLoadMore,
    multipleSelect,
  },
  data() {
    return {
      status: "loading",
      modal: false,
      button: [
        {
          text: "取消",
          type: "gray",
        },
        {
          text: "确定",
        },
      ],
      multipleFlag: false,
      userlist: [], //用户
      defaultSelected: [], //默认选中用户
      selected: [], //选中用户
      show: false,
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      loginAccount: uni.getStorageSync("loginAccount"),
      data: {},
      param: {
        pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      },
      list: [],
      gzNum: 0,
      yjNum: 0,
      num: 0,
      zb: { longitude: 0, latitude: 0 },
      timer: null,
      clickFlag: true,
      flag: false,
      fhFlag: false,
      view: uni.getStorageSync("ios") ? this.$mp.page.$getAppWebview() : null,
    };
  },
  onShow() {
    this.multipleFlag = false;
    setTimeout(() => {
      this.multipleFlag = true;
    }, 500);
    setTimeout(() => {
      if (this.param.id) {
        this.getData();
      }
      if (this.data.status == 1) {
        this.insertGdgj();
        this.timer = setInterval(() => {
          this.insertGdgj();
        }, 60000);
      }
    }, 200);
  },
  onUnload() {
    console.log("xxxx4864");
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  onLoad(options) {
    this.data = JSON.parse(decodeURIComponent(options.data));
    this.flag = options.flag;
    this.param.id = this.data.id;
    if (uni.getStorageSync("zb" + this.data.id)) {
      this.zb = uni.getStorageSync("zb" + this.data.id);
    }
  },
  methods: {
    getUser() {
      if (this.userlist.length) {
        this.show = true;
        return;
      }
      API.selectUserOptions({
        pzhAuthorization: this.pzhAuthorization,
        needNull: false,
        executionClass: "cn.scihi.zhgl.ucc.HtUcc",
        roleIds: "1141270155063418881",
      }).then((res) => {
        if (res.resCode == "success") {
          uni.hideLoading();
          res.datas.forEach((item) => {
            this.userlist.push({
              label: item.NAME,
              value: item.ACCOUNT,
            });
            if (item.ACCOUNT == this.loginAccount) {
              this.defaultSelected.push(item.ACCOUNT);
              this.selected.push(item);
            }
          });
          this.show = true;
        }
      });
    },
    setAll(data) {
      if (!data || !data.length) {
        uni.showToast({
          icon: "none",
          title: "请至少选择一个执行人",
          duration: 2000,
        });
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确定要将全部未执行任务设为正常吗？",
        success: (res) => {
          if (res.confirm) {
            let clr = "",
              clr_name = "";
            data.forEach((item, index) => {
              clr += (index ? "," : "") + item.value;
              clr_name += (index ? "," : "") + item.label;
            });
            API.updateBatchSuccessXjgdRw({
              id: this.data.id,
              pzhAuthorization: this.pzhAuthorization,
              clr,
              clr_name,
            }).then((res) => {
              if (res.resCode == "success") {
                this.getData();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    insertGdgj() {
      // return
      uni.getLocation({
        // type: "gcj02",
        success: (zb) => {
          // zb = util.bd_encrypt(zb.longitude, zb.latitude);
          console.log("当前位置的经度：" + zb.longitude);
          console.log("当前位置的纬度：" + zb.latitude);
          if (
            this.zb.longitude.toString().substring(0, 7) ==
              zb.longitude.toString().substring(0, 7) &&
            this.zb.latitude.toString().substring(0, 6) ==
              zb.latitude.toString().substring(0, 6)
          ) {
            console.log("坐标相等");
          } else {
            console.log("!=等");
            this.zb = zb;
            API.insertGdgj({
              pzhAuthorization: this.pzhAuthorization,
              gd_id: this.data.id,
              wd: zb.latitude,
              jd: zb.longitude,
            }).then((r) => {
              if (r.resCode == "success") {
                uni.setStorage({
                  key: "zb" + this.data.id,
                  data: this.zb,
                });
              }
            });
          }
        },
        fail: (r) => {
          console.log(r, 4411);
          uni.showModal({
            content: "获取地理位置失败，请检查是否已开启定位权限",
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        },
      });
    },
    submit() {
      uni.showModal({
        content:
          "确定要" + (this.data.status == 0 ? "开始" : "提交") + "任务吗？",
        success: (res) => {
          if (res.confirm) {
            if (this.data.status == 0) {
              API.updateStartXjgd({
                pzhAuthorization: this.pzhAuthorization,
                id: this.data.id,
              }).then((y) => {
                if (y.resCode == "success") {
                  uni.hideLoading();
                  this.data.status = 1;
                  this.data.kssj = y.datas.kssj;
                  this.insertGdgj();
                  this.timer = setInterval(() => {
                    this.insertGdgj();
                  }, 60000);
                }
              });
            } else {
              API.updateEndXjgd({
                pzhAuthorization: this.pzhAuthorization,
                id: this.data.id,
              }).then((y) => {
                if (y.resCode == "success") {
                  uni.hideLoading();
                  this.data.status = 2;
                  this.data.jssj = y.datas.jssj;
                  uni.removeStorageSync("zb" + this.data.id);
                  if (this.timer) {
                    clearInterval(this.timer);
                  }
                }
              });
            }
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    goUrgentList() {
      uni.navigateTo({
        url: "./urgentList?id=" + this.data.id + "&name=" + this.data.jh_mc,
      });
    },
    goFaultLIst() {
      uni.navigateTo({
        url: "./inspectFaultList?id=" + this.data.id,
      });
    },
    goMap(flag) {
      let data = [];
      this.list.forEach((item) => {
        let zb = { longitude: "", latitude: "" };
        if (item.jhrw_rwjd) {
          zb = util.gd_encrypt(item.jhrw_rwjd, item.jhrw_rwwd);
        }
        data.push({
          name: item.jhrw_zz,
          longitude: zb.longitude,
          latitude: zb.latitude,
        });
      });
      if (flag) {
        uni.navigateTo({
          url:
            "./inspectionMap?id=" +
            this.data.id +
            "&data=" +
            encodeURIComponent(JSON.stringify(data)),
        });
      } else {
        uni.navigateTo({
          url:
            "./inspectionMap?data=" + encodeURIComponent(JSON.stringify(data)),
        });
      }
    },
    check(flag) {
      if (this.num < this.list.length) {
        if (flag) {
          uni.showToast({
            icon: "none",
            title: "请完成所有检查任务",
            duration: 2000,
          });
        }
        return false;
      }
      return true;
    },

    goComplete(data) {
      console.log(data, "wwwwww");
      data.gd_status = this.data.status;
      data.gd_id = this.data.id;

      data.xjgd_id = this.data.id;
      data.gdh = this.data.gdh;
      data.jh_mc = this.data.jh_mc;
      data.scsj = this.data.scsj;
      data.kssj = this.data.kssj;

      uni.setStorage({
        key: "inspectCompleteData",
        data: JSON.stringify(data),
      });
      uni.navigateTo({
        url: "./inspectComplete",
      });
    },
    getData() {
      this.num = 0;
      this.status = "loading";
      API.selectXjgd(this.param).then((res) => {
        this.status = "error";
        if (res.resCode == "success") {
          uni.hideLoading();
          if (res.datas.length) {
            this.status = "";
            this.list = res.datas[0].gdRwList;
            this.gzNum = res.datas[0].gzNum;
            this.yjNum = res.datas[0].yjNum;
            this.list.forEach((item) => {
              item.files = [];
              if (item.attachList) {
                item.attachList = item.attachList.replace(
                  /127.0.0.1/g,
                  `192.168.0.8`
                );
                let re = /<a.*?>/g;
                let re1 = /<img.*?>/g;
                let arr = item.attachList.match(re);
                let arr1 = item.attachList.match(re1);
                if (arr != undefined && arr.length) {
                  arr.forEach((it) => {
                    item.files.push(
                      it.match(/\shref=['"](.*?)['"]/)[1] +
                        `&pzhAuthorization=${this.pzhAuthorization}`
                    );
                  });
                }
                if (arr1 != undefined && arr1.length) {
                  arr1.forEach((it) => {
                    item.files.push(
                      it.match(/\ssrc=['"](.*?)['"]/)[1] +
                        `&pzhAuthorization=${this.pzhAuthorization}`
                    );
                  });
                }
                item.attachList = "";
              }
              if (item.status == "2") {
                this.num++;
                console.log(this.num, 4544);
              }
            });
          } else {
            this.status = "noHave";
          }
        }
      });
    },
  },
};
</script>
<style lang="less">
scroll-view ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
<style lang="less" scoped>
/* #ifndef APP-NVUE */
body {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
text {
  font-size: 30rpx;
  // line-height: 2em;
  color: #333;
}

page {
  background: #fff;
}

button {
  width: 100%;
}
/* #endif */
.content {
  background: white;
  font-size: 28rpx;
  height: 100vh;
  .details {
    padding: 32rpx;
    font-weight: 400;
    color: #9197b0;
    line-height: 2em;
    text {
      color: #454e64;
    }
  }
  .line {
    width: 100vw;
    height: 12rpx;
    background: #f5f6f9;
  }
  .jieguo {
    width: calc(100vw - 104rpx);
    margin-left: 32rpx;
    border: 2rpx dotted #d2d5de;
    padding: 0 20rpx 20rpx 20rpx;
    display: flex;
    text-align: center;
    border-radius: 4rpx;
    flex-wrap: wrap;
    view {
      width: 72rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 4rpx;
      margin-right: 16rpx;
      margin-top: 20rpx;
    }
  }
  .item:active {
    background: #e6e6e6;
  }
  .item {
    background: #f7f7f7;
    border-radius: 8rpx;
    width: calc(100vw - 112rpx);
    padding: 32rpx 24rpx;
    margin: 32rpx 0 0 32rpx;
    .button {
      width: 176rpx;
      height: 56rpx;
      line-height: 56rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 36rpx;
      border: 2rpx solid rgba(74, 125, 221, 1);
      text-align: center;
      color: #4a7ddd;
    }
    .index {
      text-align: center;
      min-width: 40rpx;
      padding: 0 6rpx;
      box-sizing: border-box;
      height: 40rpx;
      line-height: 32rpx;
      background: red;
      border-radius: 20rpx;
      border: 2rpx solid rgba(86, 140, 229, 1);
      color: white;
      background-image: linear-gradient(
        90deg,
        rgba(86, 140, 229, 1) 0%,
        rgba(58, 200, 221, 1) 100%
      );
      margin-right: 16rpx;
    }
    .center {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      line-height: 48rpx;
      margin-top: 16rpx;
      text {
        color: #9197ae;
      }
      view {
        width: 86rpx;
        height: 48rpx;
        border: 2rpx solid #62cbaa;
        text-align: center;
        border-radius: 4rpx;
      }
    }
    .miaoshu {
      white-space: nowrap;
      overflow: hidden;
      margin-top: 16rpx;
      text-overflow: ellipsis;
      color: #9197b0;
      width: 84%;
      text {
        color: #454e64;
      }
    }
    .tab {
      margin-top: 16rpx;
      width: 100%;
      white-space: nowrap;
      display: flex;
      justify-content: space-between;
    }
  }
  .foot {
    width: calc(100vw - 64rpx);
    background: rgba(74, 125, 221, 1);
    margin: 24rpx 0 0 32rpx;
    line-height: 76rpx;
    text-align: center;
    color: white;
    border-radius: 8rpx;
  }
}
</style>
